<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网络课程资源中心</title>
<script type="text/javascript" src="res/js/jquery-upload.js"></script>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="res/bootstrap/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="res/bootstrap/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="res/bootstrap/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="res/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="res/js/ajaxfileupload.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery(".progress").hide();
});

function startProcess() {
	var time = 300; 
	var interval; //调度器对象
	interval = setInterval("getProcess()",time);
	return interval;
}
function endProcess(interval) {
	clearInterval(interval);
}
function getProcess() {
	//console.log(1);
	jQuery.ajax({
		type:'get',
		url:'upload/uploadProgress.html',
		dataType:'text',
		success:function(data) {
			jQuery(".progress-bar").attr("style","width:"+data+"%");
		},
		error:function(data,status,e) {
			console.log(e);
		}
	});
}
function ajaxFileUpload()
{
	var obj = jQuery("#file")[0];
	//var resType=jQuery("select[id=type] option[selected]").val();
	var resType = jQuery("#resType").val();
	if(obj.value==null||obj.value=='') {
		alert("请选择文件！");
		return false;
	}
	if(resType==null||resType=='') {
		alert("请输入资源类型！");
		return false;
	}
	jQuery(".progress").show();
	$('#myModal').modal('show');
	var it=startProcess();
    jQuery.ajaxFileUpload
    (
        {
            url:'upload/uploadSubmit.html?clothId=1'+'&type='+resType,
            secureuri:false,
            fileElementId:'file',
            dataType: 'json',
            success: function (data, status)
            {
                /*if(typeof(data.error) != 'undefined')
                {
                    if(data.error != '')
                    {
                        alert(data.error);
                    }else
                    {
                        alert(data.msg);
                    }
                }*/
                jQuery(".progress-bar").attr("style","width:100%");
                endProcess(it);
                setTimeout("",500);
                alert("上传成功！");
			    jQuery(".progress").hide();
			    jQuery("#myModal").modal('hide');
			    jQuery(".progress-bar").attr("style","width:0%");
            },
            error: function (data, status, e)
            {
            	endProcess(it);
                alert(e);
            }
        }
    )
    return false;
}
</script>
</head>
<body>
	<form action="upload/uploadSubmit.html" method="post" enctype="multipart/form-data">
	选择文件:<input type="file" name="file" id="file">
	<input type="hidden" name="clothId" value="1">
	输入类型<input type="text" name="type" id="resType">
	<input type="button" value="开始上传" onclick="return ajaxFileUpload();"> 
</form>
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">uploading file...</h4>
      </div>
      <div class="modal-body">
        <div class="progress progress-striped active">
		  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%">
		    <span class="sr-only">45% Complete</span>
		  </div>
		</div>
      </div>
    </div>
  </div>
</div>

</body>